<template>
  <div>
    <ul class="subList">
      <li v-for="(item,index) in subList.slice(0,6)" :key="index" >
        <el-button
            type="primary"
            style="color: #0a0a0a;
 background-color: #fff;
border-color: #fff;"
            @click.prevent="showGood(secCateId,item.id)">
          {{ item.name }}
        </el-button>
<!--        <a href="" @click.prevent="showGood(secCateId,item.id)">{{ item.name }}</a>-->

      </li>
    </ul>
  </div>
</template>

<script>
import {getRequest} from "@/utils/api";
export default {
  name: "SmallSub",
  props:{
    secCateId:{
    }
  },
  data(){
    return{
      subList:[]
    }
  },
  methods:{
    showGood(secCateId,subId){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.$router.push({path:'/paybook',query:{cateId:secCateId,subId:subId}})
      }, 1000);

    },
    showSub(secCateId){
      console.log(secCateId)

    }
  },
  created() {
    console.log(this.secCateId);
    getRequest('/p/pms/subject/cate/'+this.secCateId).then((resp)=>{
      this.subList = resp.data
    })
  }
}
</script>

<style scoped>
.subList{
  width: 20em;
  /*border: solid 1px lightgray;*/
  overflow: hidden;
}
.subList li{
  float: left;
  width: 5em;
  /* border: solid; */
  line-height: 3em;
margin-right: 4px;
  height: 2em;
  margin-bottom: 12px;
}
.subList:nth-child(2){
  position: relative;
  top: -1em;
}
</style>